<template>
  <div>
    <div class="right" style="width: 60%;height: 700px;border: 1px red solid;float:right;">
      <el-table
          ref="multipleTable"
          :data="musicList"
          tooltip-effect="dark"
          style="width: 100%">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
            prop="uptime"
            :formatter="formatDate"
            label="上传日期"
            width="120">
        </el-table-column>
        <el-table-column
            prop="songname"
            label="歌名"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="singer"
            label="歌手"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="adminupyz"
            label="语种"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="adminupfl"
            label="分类"
            show-overflow-tooltip>
        </el-table-column>
      </el-table>
    </div>
    <div class="left" style="width: 50%;height: 300px;">

      <span style=" position: relative;top: 95px">歌名：</span>
      <el-input style="width: 215px;position: relative;top: 95px" v-model="input" placeholder="请输入内容"></el-input>
      <br>
      <span style=" position: relative;top: 110px">歌手：</span>
      <el-input style="width: 215px;position: relative;top: 110px" v-model="input1" placeholder="请输入内容"></el-input>
      <br>

      <span>语种：</span>
      <el-select v-model="value" placeholder="请选择" style="margin-top: 120px">
        <el-option
            v-for="item in options"
            :key="item.value"
            :value="item.value">
        </el-option>
      </el-select>
      <br>
      <span>分类：</span>
      <el-select v-model="value1" placeholder="请选择" style="margin-top: 10px">
        <el-option
            v-for="item in fenlei"
            :key="item.value1"
            :value="item.value1">
        </el-option>
      </el-select>
      <el-upload
          style="position: absolute;left: 920px;"
          class="avatar-uploader"
          :action="$axios.defaults.baseURL + '/api/adminup/upload'"
          :on-success="uolod"
          :show-file-list="false"
          multiple>
        <el-button type="primary" round style="position: absolute;left: -450px;top: 100px">上传音乐</el-button>
      </el-upload>
    </div>
  </div>
</template>

<script>
export default {
  name: "",

  data() {
    return {
      input:'',
      input1:'',
      options: [{
        value: '华语'
      }, {
        value: '欧美'
      }, {
        value: '日本'
      }, {
        value: '韩国'
      }, {
        value: '其他'
      }],
      fenlei: [{

        value1: '男歌手'
      }, {

        value1: '女歌手'
      }, {

        value1: '乐队组合'
      }],
      value: '',
      value1: '',
      musicList: [],

    }
  },

  created() {
    this.$axios.get('/api/adminup/upmusicList').then(res => {
      console.log(res.data.data)
      if (res.data.data != null && res.data.data.length > 0) {
        this.musicList = res.data.data;
      }

    })
  },

  methods: {
    uolod(res) {
      if (res.status === 1) {
        this.$message.success(res.msg);
      }
      console.log(res)
      let obj = {
        url: res.data.url,
        adminupyz: this.value,
        adminupfl: this.value1,
        songname: this.input,
        singer: this.input1,
      }
      this.$axios.post('/api/adminup/upmusic', obj).then(res => {
        console.log(res)
      })
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    formatDate(row, column) {
      // 获取单元格数据
      let data = row[column.property]
      if (data === '') {
        return ''
      } else {
        let dt = new Date(data)
        return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate()
      }
    },
    uploadSuccess(res) {
      if (res.status === 1) {
        this.$message.success(res.msg);
      }
    },
  }
}
</script>

<style scoped>

</style>